<template>
  <div>
    <div class="row-main">
      <el-button type="shenda" size="mini" icon="el-icon-refresh"@click="refresh" >刷新数据</el-button>
      <el-button type="shenda" size="mini" icon="el-icon-plus" @click="toBatch" v-has="'batchStockInPer'">批量入库</el-button>
      <el-button type="shenda" size="mini" icon="el-icon-plus" @click="toThird" v-has="'thirdStockInPer'">三方入库</el-button>
      <el-table
        :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        :data="tableData" class="row-main-table"
        v-loading.fullscreen="tableLoading" element-loading-text="入库数据加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)" @sort-change="changeSort"
      >
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="singleSetMealSlot" label="单卡套餐" align="center"></el-table-column>
        <el-table-column prop="outStockSuccessSlot" label="入库成功" align="center"></el-table-column>
        <el-table-column prop="errorInsertCountSlot" label="入库失败" align="center"></el-table-column>
        <el-table-column prop="dictInboundTypeName" label="入库类型" align="center"></el-table-column>
        <el-table-column prop="dictInboundStatusName" label="入库状态" align="center"></el-table-column>
        <el-table-column prop="accountName" label="通道名称" align="center"></el-table-column>
        <el-table-column prop="dictCardBodyType" label="卡体类型" align="center"></el-table-column>
        <el-table-column prop="dictCardTypeName" label="是否共享" align="center"></el-table-column>
        <el-table-column prop="dictChoseDirectName" label="定向选择" align="center"></el-table-column>
        <el-table-column prop="startIccid" label="起始ICCID" align="center" sortable></el-table-column>
        <el-table-column prop="endIccid" label="结束ICCID" align="center" sortable></el-table-column>
        <el-table-column prop="startCardNumber" label="起始业务号码" align="center" sortable></el-table-column>
        <el-table-column prop="endCardNumber" label="结束业务号码" align="center" sortable></el-table-column>
        <el-table-column prop="quietPeriodDateDate" label="静默期到期时间" align="center" sortable></el-table-column>
        <el-table-column prop="insertTime" label="入库时间" align="center" sortable></el-table-column>
        <el-table-column prop="oprationEmpName" label="操作人" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div class="el-dropdown-link">
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><el-button class="operation" type="text" style="width: 100%;"  @click="batchSettingPackage(scope.row)">设置套餐</el-button></el-dropdown-item>
                <el-dropdown-item><el-button class="operation" type="text" style="width: 100%;"  @click="isTrueName(scope.row)">设置实名</el-button></el-dropdown-item>
<!--                <el-dropdown-item><el-button class="operation" type="text" style="width: 100%;"  @click="reSearch(scope.row.id)">刷新上游数据</el-button></el-dropdown-item>-->
<!--                &&(scope.row.startCardNumber||scope.row.startIccid)-->
                <el-dropdown-item v-if="scope.row.errorInsertCount&&scope.row.errorInsertCount>0">
                  <el-button class="operation" type="text" style="width: 100%;" @click="getErrorExcel(scope.row)" >
                    下载失败卡号
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="page.size"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10,20,50,100]"
          background
          class="row-main-pager">
        </el-pagination>
      </div>
      <!--设置实名弹框-->
      <el-dialog
        class="delete"
        top="33vh"
        :visible.sync="isTruenameDialog"
        width="30%"
        title="设置实名"
        :append-to-body="true">
        <el-form class="disabledDialog">
          <el-form-item style="text-align: center">
            <!-- <el-radio v-model="truenameRadio" label="C_YES">需要实名</el-radio>
            <el-radio v-model="truenameRadio" label="C_NO">不需要实名</el-radio> -->
            <el-select v-model="truenameRadio" placeholder="是否实名" size="small">
              <el-option v-for="item in realNameOptions" :key="item.id" :value="item.id" :label="item.realnameName"/>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;margin-top: 10px;margin-left: 75%">
            <el-button size="small" @click="isTruenameDialog = false">取 消</el-button>
            <el-button size="small" type="primary" @click="acqTruename()" v-preventReClick>确 定</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>
  </div>


</template>

<script>
import {mapGetters} from 'vuex'
import {
  inboundList, settingCardRealNameStatus, reSearch,
  getInStockExcelUrl, //excel下载
  getRealNameList, // 下拉选
} from '@/api/getData'

export default {
  name: 'Home',
  data() {
    return {
      // 设置实名下拉列表
      realNameOptions: [],
      truenameRadio: "",
      startCardNumber: '',
      endCardNumber: '',
      dialogVisible: false,
      isTruenameDialog: false,
      dialogVisible3: false,
      textarea1: '',
      radio2: '1',
      maxPage: 1,
      totalPage: 0,
      page: {
        current: 1,
        size: 10,
        ascs: [],
        descs: [],
      },
      total: 0,
      tablePage: {
        pageSize: 15,
        pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000]
      },
      tableData: [],
      ascs: [],
      descs: [],
      pageSize: 10,
      currentPage: 1,
      id: '',
      insertTime: '',
      pid: '',
      dictDisabledCardStatus: '',
      dictDisabledCardStatusName: '',
      startCardNum: '',
      endCardNum: '',
      oprationEmp: '',
      oprationEmpName: '',
      dictOprationType: '',
      ruleTypeId: '',
      reason: '',
      oemId: '',
      startTime: '',
      endTime: '',
      ruleName: '',
      input: '',
      dictDisabledRuleType: '',
      dialogVisible1: false,
      tableLoading: false,
      value1: '',
      value2: '',
      pagekey: '',
    }
  },

  async created() {
    this.initData();
    this.realNameList();
    this.pagekey = await this.$getPageKey();
  },
  methods: {
    async realNameList() {
      let returnData = await getRealNameList()
      if (returnData._result) {
        this.realNameOptions = returnData.data
        this.firstOption()
      }
    },
    // 选择第一个option
    firstOption() {
      this.truenameRadio = this.realNameOptions[0].id
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.initData()
    },
    handleSizeChange(val) {
      this.page.current = 1;
      this.page.size = val;
      this.initData();
    },
    refresh() {
      this.page.current = 1;
      this.initData();
    },
    //设置套餐
    batchSettingPackage(card) {
      +
        this.$router.push({
          path: '/card/batch-setting-package', query: {
            start: card.startCardNumber,
            end: card.endCardNumber
          }
        })
    },
    //设置实名
    isTrueName(card) {
      this.isTruenameDialog = true;
      this.startCardNumber = card.startCardNumber;
      this.endCardNumber = card.endCardNumber
    },
    async acqTruename() {
      let s = await settingCardRealNameStatus({
        cardNumberStart: this.startCardNumber,
        cardNumberEnd: this.endCardNumber,
        dictIsNeedRealName: this.truenameRadio
      })
      if (s._result) {
        this.$message.success("操作成功！")
        this.isTruenameDialog = false;
        this.initData()
      }

    },
    toSingle() {
      this.$router.push({
        path: '/Stock/stock-in'
      })
    },
    toThird(){
      this.$router.push({
        path: '/Stock/thirdInventory'
      })

    },
    //下载失败卡号excel
    getErrorExcel(item) {
      let url = `/api/inventory-system/card/excel/download/white?id=${item.id}`;
      window.open(url, '_blank');
    },
    toBatch() {
      this.$router.push({
        path: '/Stock/batch-stock-in'
      })
    },

    changeSort(column) {
      this.page.ascs = column.order=='ascending'?[column.prop]:[];
      this.page.descs = column.order=='ascending'?[]:[column.prop];
      this.initData();
    },

    // handleSelectionChange(val) {
    //   this.tableChecked = val
    //   const length = this.tableChecked.length
    //   //console.log(`共 ${length} 条`)
    // },
    // handleSizeChange(val) {
    //   //console.log(`每页 ${val} 条`)
    //   this.pageSize = val
    //   this.initData()
    // },
    // handleCurrentChange(val) {
    //   //console.log(`当前页: ${val}`)
    //   this.currentPage = val
    //   this.initData()
    // },
    reSearch(id) {
      reSearch({id}).then(v => {
        this.$message.success("操作成功！")
      })
    },

    // 入库列表
    async initData() {
      this.tableLoading = true;
      sessionStorage.setItem(this.$route.params.path, JSON.stringify(this.searchForm))
      const returnData = await inboundList({
          page: this.page
        },
        {
          obj: this,
          key: 'tableLoading'
        })
      this.tableData = []
      if (returnData._result) {
        returnData.data.records.map(item => {
          // const obj = {}
          // obj.id = item.id
          // obj.accountId  = item.accountId  //账号
          // obj.dictCardBodyType  = item.dictCardBodyType===null?'--':item.dictCardBodyType //卡体类型
          // obj.dictCardType  = item.dictCardType  //是否共享
          // obj.dictCardTypeName  = item.dictCardTypeName  //是否共享
          // obj.dictChoseDirect  = item.dictChoseDirect //定向选择
          // obj.dictChoseDirectName  = item.dictChoseDirectName //定向选择
          // obj.dictInboundType  = item.dictInboundType  // 入库类型
          // obj.dictInboundTypeName  = item.dictInboundTypeName  // 入库类型
          // obj.startCardNumber  = item.startCardNumber  // 起始业务号码
          // obj.endCardNumber  = item.endCardNumber  // 结束业务号码
          // obj.startIccid  = item.startIccid  // 起始iccid
          // obj.endIccid  = item.endIccid  // 结束iccid
          // // obj.outStockSuccess = item.insertCount+'张'
          // // obj.errorInsertCount = item.errorInsertCount===null?'0张':item.errorInsertCount +'张'
          // obj.dictInboundStatusName =  item.dictInboundStatusName   // 入库状态
          // obj.insertTime  = item.insertTime  // 被禁用规则的ID
          // obj.oemId  = item.oemId  // 被禁用或者解禁的原因
          // obj.oprationEmpId  = item.oprationEmpId   // 操作人ID
          // obj.oprationEmpName  = item.oprationEmpName  //操作人姓名
          // obj.quietPeriodDate  = item.quietPeriodDate //静默期到期时间
          // obj.quietPeriodDateDate  = item.quietPeriodDateDate //静默期到期时间
          // // obj.singleSetMeal  = item.singleSetMeal/1024+'GB' //单卡套餐
          // obj.startDate   = item.startDate
          // obj.endDate   = item.endDate
          // obj.userId   = item.userId
          // obj.errorInsertCount = item.errorInsertCount;
          item.outStockSuccessSlot = item.insertCount=== null ?'0张':item.insertCount + '张'
          item.errorInsertCountSlot = item.errorInsertCount === null ? '0张' : item.errorInsertCount + '张'
          item.singleSetMealSlot = item.singleSetMeal / 1024 + 'GB' //单卡套餐
          this.tableData.push(item)
        })
        this.total = returnData.data.total
        this.tableLoading = false
      }
    },

    async getExcel(row) {
      let url = `/api/inventory-system/card/excel/download/white?id=${row.id}`
      window.location.href = url
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.disabledList-title {
  font-weight: bold;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}

.disabledList-tableTitle {
  font-weight: bold;
  color: #606266;
}

.block {
  text-align: right;
}

.el-dropdown-link {
  font-size: 20px;
  cursor: pointer;
}

.el-popper[x-placement^=bottom] {
  margin-right: -41px;
  box-shadow: 0 0 10px #888888;
  margin-left: 5px;
  border: none;
}

.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
}
.operation {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: 0;
  outline: none;
  display: block;
  text-align: center;
  margin: 0;
  padding: 0 17px;
}
</style>
